<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const error = ref(null)
const hotel = ref(null)
const roomTypes = ref([])

const activeImageIndex = ref(0)

const hotelId = computed(() => route.params.id)

const fetchHotelDetail = async () => {
  loading.value = true
  error.value = null
  try {
    const res = await fetch(`http://localhost:8000/hotel/${hotelId.value}`)
    const data = await res.json()
    if (data.code === 200) {
      hotel.value = data.data?.hotel || null
      roomTypes.value = data.data?.room_types || []
    } else {
      error.value = data.message || '获取酒店详情失败'
    }
  } catch (e) {
    error.value = '网络错误，请稍后重试'
    console.error(e)
  } finally {
    loading.value = false
  }
}

const images = computed(() => hotel.value?.images || [])

const setActive = (idx) => {
  activeImageIndex.value = idx
}

const mainImageUrl = computed(() => {
  if (!images.value.length) return 'https://via.placeholder.com/750x420?text=Hotel'
  // 若用户点选缩略图，优先展示当前索引
  if (activeImageIndex.value >= 0 && activeImageIndex.value < images.value.length) {
    return images.value[activeImageIndex.value].image_url
  }
  const main = images.value.find(i => i.is_main)
  return (main || images.value[0]).image_url
})

const handleBook = (room) => {
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(today.getDate() + 1)
  const fmt = (d) => d.toISOString().slice(0, 10)
  router.push({
    name: 'order-confirm',
    query: {
      hotel_id: hotelId.value,
      room_type_id: room.id,
      check_in_date: fmt(today),
      check_out_date: fmt(tomorrow),
      rooms: 1
    }
  })
}

onMounted(() => {
  fetchHotelDetail()
})
</script>

<template>
  <div class="hotel-detail-page">
    <header class="page-header">
      <div class="header-content">
        <button class="back-btn" @click="router.back()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <h1 class="page-title">酒店详情</h1>
        <div class="header-placeholder"></div>
      </div>
    </header>

    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else-if="error" class="error-container">
      <p>{{ error }}</p>
      <button class="retry-btn" @click="fetchHotelDetail">重试</button>
    </div>

    <div v-else-if="hotel" class="content">
      <!-- 图片区域 -->
      <section class="image-gallery">
        <div class="main-image">
          <img :src="mainImageUrl" :alt="hotel.hotel_name">
        </div>
        <div v-if="images.length > 1" class="thumbs">
          <div
            v-for="(img, idx) in images"
            :key="img.id || idx"
            :class="['thumb', { active: idx === activeImageIndex }]"
            @click="setActive(idx)"
          >
            <img :src="img.image_url" :alt="`image-${idx}`">
          </div>
        </div>
      </section>

      <!-- 基本信息 -->
      <section class="base-info">
        <h2 class="hotel-name">{{ hotel.hotel_name }}</h2>
        <p class="address">📍 {{ hotel.city }} {{ hotel.address }}</p>
        <div v-if="hotel.facilities && hotel.facilities.length" class="facilities">
          <span
            class="facility"
            v-for="f in (Array.isArray(hotel.facilities) ? hotel.facilities : String(hotel.facilities).split(','))"
            :key="f"
          >
            {{ f }}
          </span>
        </div>
      </section>

      <!-- 房型列表 -->
      <section class="rooms">
        <h3 class="section-title">可订房型</h3>
        <div v-if="!roomTypes.length" class="empty">暂时没有房型</div>
        <div v-else class="room-list">
          <div v-for="room in roomTypes" :key="room.id" class="room-card">
            <div class="room-info">
              <div class="room-title">
                <span class="name">{{ room.name }}</span>
                <span v-if="room.area" class="area">{{ room.area }}㎡</span>
                <span v-if="room.beds" class="beds">{{ room.beds }}</span>
                <span v-if="room.capacity" class="capacity">可住{{ room.capacity }}人</span>
              </div>
              <p v-if="room.features && room.features.length" class="features">
                <span
                  v-for="ft in (Array.isArray(room.features) ? room.features : String(room.features).split(','))"
                  :key="ft"
                  class="feature-tag"
                >{{ ft }}</span>
              </p>
            </div>
            <div class="room-action">
              <div class="price">
                <span class="symbol">¥</span>
                <span class="amount">{{ room.price }}</span>
                <span class="unit">/晚</span>
              </div>
              <button class="book-btn" @click="handleBook(room)">预订</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  </template>

<style scoped>
.hotel-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-content {
  max-width: 375px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  height: 56px;
}
.back-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-title { font-size: 18px; font-weight: 600; color: #333; margin: 0; }
.header-placeholder { width: 36px; }

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
.retry-btn {
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
}

.content {
  max-width: 375px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.image-gallery { background: #000; }
.main-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.main-image img { width: 100%; height: 100%; object-fit: cover; }
.thumbs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #111;
  overflow-x: auto;
}
.thumb {
  width: 60px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.6;
  border: 2px solid transparent;
}
.thumb.active { opacity: 1; border-color: #1890ff; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.base-info {
  background: #fff;
  padding: 16px;
}
.hotel-name { margin: 0 0 8px 0; font-size: 20px; font-weight: 700; color: #333; }
.address { margin: 0; color: #666; font-size: 14px; }
.facilities { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.facility {
  background: #f0f0f0;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.rooms { margin-top: 8px; background: #fff; padding: 16px; }
.section-title { margin: 0 0 12px 0; font-size: 16px; font-weight: 600; color: #333; }
.empty { color: #999; text-align: center; padding: 20px 0; }
.room-list { display: flex; flex-direction: column; gap: 12px; }
.room-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}
.room-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.room-title .name { font-weight: 600; color: #333; }
.room-title .area, .room-title .beds, .room-title .capacity {
  color: #999; font-size: 12px;
}
.features { margin: 6px 0 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.feature-tag { background: #f7f7f7; color: #666; border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.room-action { display: flex; align-items: center; gap: 12px; }
.price { color: #ff6b35; display: flex; align-items: baseline; }
.symbol { font-size: 14px; font-weight: 600; }
.amount { font-size: 22px; font-weight: 700; margin: 0 2px; }
.unit { font-size: 12px; color: #999; }
.book-btn {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .content { max-width: 768px; }
  .main-image { height: 360px; }
}
</style>


